<template>
  <div class="changePasswordWrap">
    <div class="headercolor">
      <!-- 头部组件引入 -->
      <my-header title="修改密码">
        <!-- 左侧区域内容 -->
        <template #left>
          <div class="iconmin" @click="go">
            <img src="../../../static/images/login/icon.png" alt="" />
          </div>
        </template>
      </my-header>
    </div>
    <!-- form组件引入 -->
    <loginpublic>
      <template #inputslot>
        <van-field
          v-model="oldpassword"
          type="password"
          placeholder="请输入旧密码"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="newpassword"
          type="password"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="password"
          :type="flag == true ? 'password' : 'text'"
          placeholder="再次输入密码"
          :rules="[{ required: true, message: '' }]"
        />
        <img
          src="../../../static/images/login/eye.png"
          alt=""
          class="imgicon"
          @click="changType"
        />
      </template>
      <!-- 确定 -->
      <template #btn>
        <div class="ok">确定</div>
      </template>
    </loginpublic>
  </div>
</template>

<script>
import MyHeader from "../../components/myHeader/myHeader.vue";
import loginpublic from "./loginpublic.vue";
export default {
  components: { loginpublic, MyHeader },
  data() {
    return {
      oldpassword: "",
      newpassword: "",
      twopassword: "",
      password: "",
      type: "password",
      flag: true,
    };
  },
  methods: {
    changType() {
      //密码显示隐藏
      this.flag = !this.flag;
    },
    // 返回上一页
    go() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.changePasswordWrap {
  /deep/.van-cell {
    height: 100px;
  }
  /deep/ .van-field__control {
    width: 203px;
    height: 33px;
    font-size: 34px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #232323;
    line-height: 60px;
    opacity: 0.6;
  }
  /deep/ .van-nav-bar__title {
    color: #ffffff;
  }
  .headercolor {
    background-color: red;
  }
  .imgicon {
    width: 40px;
    height: 30px;
    z-index: 2;
    position: fixed;
    right: 63px;
    top: 590px;
  }
  .iconmin {
    img {
      width: 60px;
    }
  }
  .ok {
    width: 80px;
    height: 32px;
    font-size: 34px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 32px;
  }
}
</style>